import { Component, OnDestroy } from '@angular/core';
import { NavigationEnd, Router, UrlSegment } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'bread-crumbs',
  templateUrl: 'breadCrumbs.component.html',
  standalone: false
})
export class BreadCrumbsComponent implements OnDestroy {
  routeSubscription: Subscription;
  routeArray?: string[];

  constructor(private router: Router) {
    this.routeSubscription = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.routeArray = [];
        const tree: UrlSegment[] = this.router.parseUrl(event.url).root.children['primary'].segments;
        tree.map((segment) => {
          this.routeArray?.push(segment.path);
        });
      }
    });
  }

  navigate(index?: number) {
    if (!this.routeArray || (!index && index !== 0)) {
      this.router.navigate(['']);
      return;
    }

    index++;
    if (index >= this.routeArray.length) {
      return;
    }

    const urls = this.routeArray.slice(0, index);
    this.router.navigate([`/${urls.join('/')}`]);
  }

  ngOnDestroy() {
    this.routeSubscription.unsubscribe();
  }
}
